<template>
<!-- 首页 -->
  <div class="home">
    <!-- 头部 -->
    <Header :Title="title" :Type='type'></Header>
    <!-- 轮播 -->
    <van-swipe 
      class="my-swipe"  
      :autoplay='5000' 
      indicator-color='blue'>
        <van-swipe-item v-for="(i,j) in bannerList" :key='j'>
          <img :src="i.img" alt="" @click="goBookDetails(i.id)">
        </van-swipe-item> 
    </van-swipe>
    <!-- 书目统计 -->
    <div class="bookNum">
      <img src="../assets/bookicon.png" alt="">
      共
      <span>{{bookNum|thousand}}</span>
      册，本周新增
      <span>{{newNum|thousand}}</span>
      册
    </div>
    <!-- 榜单 -->
    <div>
        <div class="bangdan" v-for="(i,j) in bangdan" :key='j'>
          <h3 class="head" @click='goRankList(i.type)'>
            <span class="title">{{i.name}}</span>
            <span class="more">更多&nbsp;&gt;</span>
          </h3>
          <ul>
            <li v-for="(v,index) in i.DataList" :key='index' @click="goBookDetails(v.id)">
              <div class="left">
                <img :src='v.cover' alt="">
              </div>
              <div class="right">
                <h4>
                  {{v.title}}
                  <span v-if="v.over==1" class="over">完结</span>
                  <span v-else class="lianzai">连载</span>
                </h4>
                <p class="desc">{{v.longIntro}}</p>
                <div class="card-foot">
                  <span class="aur">{{v.author}}</span>
                  <span>{{v.majorCate}}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
    </div>
    <DownLoad></DownLoad>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import DownLoad from '@/components/DownLoad.vue'
export default {
  name: 'Home',
  components: {
    Header,
    Footer,
    DownLoad,
  },
  data(){
    return{
      title:'快读',
      // 左分类,右搜索
      type:1,
      bookNum:1551551,
      newNum:1234,
      bannerList:[],
      bangdan:[
        {
          name:'热门',
          type:'hot',
          DataList:[]
        },
        {
          name:'新书',
          type:'new',
          DataList:[]
        },
        {
          name:'口碑',
          type:'reputation',
          DataList:[]
        },
        {
          name:'完结',
          type:'over',
          DataList:[]
        },
      ],
    }
  },
  created(){
    this.Check()
    // this.bannerList.pop()
  },
  methods:{
    Check(){
        this.$api.Preflight().then(res=>{
          if(res.errorno == 200){
            this.getServerTime()
            // this.getBanner()
            // this.getNovel('hot')
            // this.getNovel('new')
            // this.getNovel('reputation')
            // this.getNovel('over')
          }
        }).catch((()=>{
          console.log('请求出错')
        }))
    },
    // 获取服务器时间
    getServerTime(){
      let time=localStorage.getItem('Time')
      let timeNow=0
      if(time==null  || timeNow-time>600000){
          // console.log('初次调用或调用接口时间短于1分钟')
          this.$api.getServerTime().then(res=>{
            timeNow=res
            localStorage.setItem('Time',res)
          })
          this.getBanner()
          this.getNovel('hot')
          this.getNovel('new')
          this.getNovel('reputation')
          this.getNovel('over')
      }else {
          // console.log('多次调用')
          // for(let i=0;i<6;i++){
          //   let midVal=localStorage.getItem('bannerList('+i+')')
          //   this.bannerList[i]=JSON.parse(midVal)
          // }
          this.bannerList=JSON.parse(localStorage.getItem('bannerList'))
          // console.log(localStorage.getItem('bangdan'))
          this.bangdan=JSON.parse(localStorage.getItem('bangdan'))
          // for(let i=0;i<4;i++){
          //   for(let j=0;j<5;j++){
          //     let midVal=localStorage.getItem('bangdan('+i+','+j+')')
          //     this.bangdan[i].DataList[j]=JSON.parse(midVal)
          //   }
          // }
          // console.log(this.bannerList,this.bangdan)
      }
    },
    // 获取轮播图
    getBanner(){
      this.$api.getBanner().then(res=>{
        this.bannerList=res.data
        // 轮播最后一张为广告
        // let ad=this.bannerList.pop()
        // for(let i=0;i<this.bannerList.length;i++){
        //   localStorage.setItem('bannerList('+i+')',JSON.stringify(this.bannerList[i]))
        // }
        localStorage.setItem('bannerList',JSON.stringify(this.bannerList))
      }).catch((()=>{
        console.log('请求出错')
      }))
    },
    // 获取书城接口
    getNovel(type){
      let param={
        type:type,
        size:5
      }
      this.$api.getNovel(param).then(res=>{
        switch (type) {
          case 'hot':
            this.bangdan[0].DataList=res.data
            break;
          case 'new':
            this.bangdan[1].DataList=res.data
            break;
          case 'reputation':
            this.bangdan[2].DataList=res.data
            break;
          case 'over':
            this.bangdan[3].DataList=res.data
            break;
          default:
            this.bangdan[3].DataList=res.data
            break;
        }
        localStorage.setItem('bangdan',JSON.stringify(this.bangdan))
        // for(let i=0;i<this.bangdan.length;i++){
        //   for(let j=0;j<this.bangdan[i].DataList.length;j++){
        //     localStorage.setItem('bangdan('+i+','+j+')',JSON.stringify(this.bangdan[i].DataList[j]))
        //   }
        // }
      }).catch((()=>{
        console.log('请求出错')
      }))
    },
    // 分类排行榜页
    goRankList(v){
      this.$router.push({
        name:'RankList',
        params:{
          type:v,
          size:5
        }
      })
    },
    // 书籍详情页
    goBookDetails(v){
        this.$router.push({
            name:'BookDetails',
            params:{
                id:v
            }
        })
    },
    
  },
  filters:{
    thousand(v){
      v=v+''
      if(v.length<4){
        return v
      }else{
        let a=v.length%3
        let b,str,arr=[]
        if(a!=0){
          b=v.substring(0,a)
          arr.push(b)
        }
        v=v.substring(a)
        for(let j=0;j<v.length;j+=3){
          str=v.substring(j,j+3)
          arr.push(str)
        }
        arr=arr.join(',')
        return arr
      }
    }
  }
}
</script>
<style scoped lang='stylus'>
.home
  position relative
.my-swipe 
  height 3.24rem
  .van-swipe-item
    img
      width 100%
   .custom-indicator 
    position absolute;
    right .1rem;
    bottom .1rem;
    padding .04rem .1rem;
    font-size .24rem;
    background rgba(0, 0, 0, 0.1);
  
.bookNum
  font-size .26rem
  margin-bottom .2rem
  color #828282
  background-color #fff
  padding .06rem 0 .06rem .2rem
  line-height .88rem
  display flex
  align-items center
  img
    width .32rem
    height .28rem
    padding-right .2rem
  span
   color red
   padding 0 .1rem
.bangdan
  background-color #fff
  &:last-child
    ul:last-child
      li:last-child
        .right
          border none
  h3
    font-size .32rem
    height .4rem
    line-height .86rem
    margin 0
    padding .2rem 0 0
    display flex
    justify-content space-between
    align-items center
    .title
      display flex
      align-items center
      &:before
        content ''
        display inline-block
        width .04rem
        height .32rem
        background-color #2f94f9
        margin-right .2rem
    .more
      float right
      font-size .28rem
      font-weight 400
      margin-right .2rem
  ul
    li
      display flex
      height 2.28rem
      padding-top .2rem;
      box-sizing border-box;
      .left
        display inline-block
        width 1.6rem
        height 2rem
        margin 0 .2rem
        img
          width 90%
          height 90%
      .right
        display inline-block
        width 5.3rem
        height 100%
        border-bottom 1px solid #ccc
        h4
          font-size .28rem
          font-weight 700
          color #222
          height .5rem
          margin-right .24rem
          .over
            padding 0 .1rem
            font-size .2rem
            color #fff
            background-color #e72f2f
          .lianzai
            padding 0 .1rem
            font-size .2rem
            color #fff
            background-color #16c954
        .desc
          font-size .24rem
          height .8rem
          line-height .4rem
          overflow hidden
          color #999
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        .card-foot
          height .76rem
          font-size .26rem
          color #2f94f9
          line-height .66rem
          .aur
            border-right .02rem solid #2f94f9
            margin-right .2rem
            padding-right .2rem

</style>
